import React, { Component } from "react"
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"
import "./App.css"
export default class App extends Component {
    // 状态在哪 操作状态的方法就在哪
    state = {
        todoList: [
            {id: "001",name: "吃饭",isComplete: false},
            {id: "002",name: "睡觉",isComplete: false},
            {id: "003",name: "打小白",isComplete: true}
        ]
    }
    addTodo = (todoObj) => {
        const {todoList} = this.state
        const newTodos = [todoObj,...todoList]
        this.setState({todoList: newTodos})
    }
    updateTodo = (id,isChecked) => {
        const {todoList} = this.state
        const newObJ = todoList.map((v,i) => {
            if(v.id === id){
                return  {...v,isComplete:isChecked}
            }else {
                return v
            }
        })
        // todoList.forEach(v => {
        //     if(v.id === id ) {
        //         v.isComplete = isChecked
        //     }
        // })
        this.setState({todoList:newObJ})

    }

    remove = (id) => {
        const {todoList} = this.state
        let newTodoList = todoList.filter((item) => {
         return item.id !== id
        })
        this.setState({todoList: newTodoList})
    }

    handleAllDone = () => {
        const {todoList} = this.state
        let newObj = todoList.filter(item => {
            return !item.isComplete
        })
        this.setState({todoList: newObj})
    }

    checkAll = (isChecked) => {
        console.log(isChecked,"isChecked::::");
        const {todoList} = this.state
        let newObj = todoList.map(item => {
            return {...item,isComplete:isChecked}
        })
        console.log(newObj,":::::newObj:::");
        this.setState({todoList: newObj})
    }
    render() {
        const {todoList} = this.state
        console.log(todoList,"todoList::::");
        return (
            <div>
                <div className="todo-container">
                    <div className="todo-wrap">
                        <Header addTodo={this.addTodo}/>
                        <List todos={todoList} updateTodo={this.updateTodo} remove={this.remove}/>
                        <Footer checkAll={this.checkAll} todos={todoList} handleAllDone={this.handleAllDone} />
                    </div>
                </div>
            </div>
        )
    }
}